<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>components/pages/Teleop.vue - Documentation</title>

    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav>
    <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Modules</li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-App.html">App</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-Events.html">Events</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-Layout.html">Layout</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#acceptCall">acceptCall</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#acceptPeerVideo">acceptPeerVideo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#callAccepted">callAccepted</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#callFailure">callFailure</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#callSuccessful">callSuccessful</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#clearHTMLVideoStream">clearHTMLVideoStream</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#closePeerVideo">closePeerVideo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#connect">connect</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#connectTo">connectTo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#dataCloseListenerCB">dataCloseListenerCB</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#dataOpenListenerCB">dataOpenListenerCB</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#getHTMLElements">getHTMLElements</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#handleData">handleData</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#handleRoomOccupantChange">handleRoomOccupantChange</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#loginFailure">loginFailure</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#loginSuccess">loginSuccess</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#onJoystickPositionChange">onJoystickPositionChange</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#performCall">performCall</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#requestFeedFromPeer">requestFeedFromPeer</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#sendData">sendData</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#sendPatrol">sendPatrol</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#setHTMLVideoStream">setHTMLVideoStream</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Layout.html#verifyJoystickState">verifyJoystickState</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-main.html">main</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-Patrol.html">Patrol</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Patrol.html#clearPatrolList">clearPatrolList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Patrol.html#clearWaypointList">clearWaypointList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Patrol.html#getSavedPatrols">getSavedPatrols</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Patrol.html#sendPatrol">sendPatrol</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-router.html">router</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-Teleop.html">Teleop</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-Teleop.html#changeJoystickState">changeJoystickState</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-widget_Connection.html">widget/Connection</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Connection.html#connectToPeer">connectToPeer</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Connection.html#disconnectFromPeer">disconnectFromPeer</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Connection.html#handleConnectionChanged">handleConnectionChanged</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Connection.html#handlePeerConnection">handlePeerConnection</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-widget_Joystick.html">widget/Joystick</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Joystick.html#drawBackground">drawBackground</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Joystick.html#drawCanvas">drawCanvas</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Joystick.html#drawJoystick">drawJoystick</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Joystick.html#emitJoystickPosition">emitJoystickPosition</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Joystick.html#findCenterCanvas">findCenterCanvas</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Joystick.html#getCanvasRadius">getCanvasRadius</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Joystick.html#getCenterX">getCenterX</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Joystick.html#getCenterY">getCenterY</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Joystick.html#getJoystickRadius">getJoystickRadius</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Joystick.html#init">init</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Joystick.html#onMouseDown">onMouseDown</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Joystick.html#onMouseMove">onMouseMove</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Joystick.html#onMouseOut">onMouseOut</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Joystick.html#onMouseUp">onMouseUp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Joystick.html#setCanvasSize">setCanvasSize</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_Joystick.html#updateJoystickPositionFromMouseEvent">updateJoystickPositionFromMouseEvent</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-widget_PatrolMap.html">widget/PatrolMap</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_PatrolMap.html#addWaypointCoord">addWaypointCoord</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_PatrolMap.html#adjustCanvasToVideo">adjustCanvasToVideo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_PatrolMap.html#drawCanvas">drawCanvas</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_PatrolMap.html#drawWaypoint">drawWaypoint</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_PatrolMap.html#drawWaypointList">drawWaypointList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_PatrolMap.html#drawYawArrow">drawYawArrow</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_PatrolMap.html#getCanvasCoordinatesFromVideo">getCanvasCoordinatesFromVideo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_PatrolMap.html#getVideoCoordinatesOfEvent">getVideoCoordinatesOfEvent</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_PatrolMap.html#getVideoOffsetAndScale">getVideoOffsetAndScale</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_PatrolMap.html#init">init</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_PatrolMap.html#isClickValid">isClickValid</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_PatrolMap.html#onMouseDown">onMouseDown</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_PatrolMap.html#onMouseMove">onMouseMove</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_PatrolMap.html#onMouseOut">onMouseOut</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_PatrolMap.html#onMouseUp">onMouseUp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_PatrolMap.html#updateWaypoint">updateWaypoint</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-widget_SaveLoad.html">widget/SaveLoad</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_SaveLoad.html#addPatrolToPatrolList">addPatrolToPatrolList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_SaveLoad.html#removePatrolFromList">removePatrolFromList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_SaveLoad.html#selectPatrolFromList">selectPatrolFromList</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-widget_VideoBox.html">widget/VideoBox</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-widget_WaypointTable.html">widget/WaypointTable</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-widget_WaypointTable.html#removeWaypointFromList">removeWaypointFromList</a></span></li>
</nav>

<div id="main">
    
    <h1 class="page-title">components/pages/Teleop.vue</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;!-- Teleop Page -->
  &lt;b-jumbotron
    id="teleop-layout"
    :fluid="true"
    :container-fluid="true"
    class="h-100 "
    bg-variant="light">
    &lt;!-- Row -->
    &lt;b-row class="h-100">
      &lt;!-- Camera column -->
      &lt;b-col
        lg="8"
        md="7"
        sm="6"
        class="mh-100">
        &lt;!-- Camera Container -->
        &lt;div class="h-100 w-100 m-auto position-relative">
          &lt;!-- Camera -->
          &lt;video-box
            :show="showCamera"
            video-id="camera-stream" />
        &lt;/div>
      &lt;/b-col>
      &lt;!-- Map and joystick column -->
      &lt;b-col
        lg="4"
        md="5"
        sm="6"
        class="mh-100">
        &lt;!-- Map row -->
        &lt;b-row class="h-50 w-100 position-relative m-0">
          &lt;!-- Map container -->
          &lt;div class="h-100 w-100 m-auto position-relative">
            &lt;!-- Map -->
            &lt;video-box
              :show="showMap"
              video-id="map-stream" />
          &lt;/div>
        &lt;/b-row>
        &lt;!-- Joystick Switch -->
        &lt;div
          class="position-absolute"
          style="top:55%;right:25px;z-index:10;">
          &lt;toggle-button
            :value="enableJoystick"
            :color="switchColor"
            :sync="true"
            :labels="true"
            :disabled="disableJoystick"
            @change="enableJoystick = $event.value" />
        &lt;/div>
        &lt;!-- Joystick Row -->
        &lt;b-row
          id="joystick-row"
          class="position-relative h-50 m-auto p-4">
          &lt;!-- Joystick Outer -->
          &lt;div
            class="position-relative m-auto"
            :style="joystickStyle">
            &lt;!-- Joystick Inner-->
            &lt;div
              class="position-absolute h-100 w-100 border
              border-secondary rounded-circle shadow-sb"
              style="top:0;left:0;">
              &lt;!-- Joystick -->
              &lt;joystick
                :enable="enableJoystick"
                :absolute-max-x="1"
                :absolute-max-y="1"
                :bus="bus" />
            &lt;/div>
          &lt;/div>
        &lt;/b-row>
      &lt;/b-col>
    &lt;/b-row>
  &lt;/b-jumbotron>
&lt;/template>


&lt;script>
/**
 * Component used as a page for teleoperation of the robot. It manages the layout of
 * its components and communicate with its parent component through a bus given in props. The
 * components used in this page are 2 VideoBox and 1 Joystick. This component have the following
 * dependency : VideoBox.vue Component, Joystick.vue Component and Bootstrap-Vue for styling.
 *
 *
 * @module Teleop
 * @vue-prop {Vue} bus - Vue bus use to emit event to other components.
 * @vue-prop {Vue} Router - Vue bus use to routing emit event to parent.
 * @vue-event {} destroyed - Event indicating the component has been destroyed.
 * @vue-event {} mounted - Event indicating the component has been mounted.
 * @vue-data {boolean} showCamera - Enable or disable the camera display.
 * @vue-data {boolean} showMap - Enable or disable the map display.
 * @vue-data {boolean} enableJoystick - Enable or disable the joystick ability to send data.
 */

/** Disabled comment documentation
 * Might use those eventually by forking jsdoc-vue-js so it can manage the author
 * and version tag correctly
 * @author Edouard Legare &lt;edouard.legare@usherbrooke.ca>
 * @version 1.0.0
 */

import { ToggleButton } from 'vue-js-toggle-button';
import Vue from 'vue';

import VideoBox from '../widget/VideoBox';
import Joystick from '../widget/Joystick';

export default {
  name: 'teleop-page',
  components: {
    VideoBox,
    Joystick,
    ToggleButton,
  },
  props: {
    bus: {
      type: Vue,
      required: true,
    },
    router: {
      type: Vue,
      required: true,
    },
  },
  data() {
    return {
      showCamera: true,
      showMap: true,
      enableJoystick: false,
      disableJoystick: true,
      joystickStyle: {
        width: '100%',
        'padding-top': '100%',
        height: 0,
      },
      switchColor: {
        checked: '#00A759',
        unchecked: '#808080',
        disabled: '#E8E8E8',
      },
    };
  },
  /**
   * Lifecycle Hook - mounted
   *
   * @method
   * @listens mount(el)
   */
  mounted() {
    console.log('Teleop have been mounted');
    this.bus.$on('on-joystick-state-changed', this.changeJoystickState);
    this.router.$emit('mounted');

    this.$nextTick(() => {
      window.addEventListener('resize', this.setJoystickStyle);
    });

    this.setJoystickStyle();
  },
  /**
   * Lifecycle Hook - destroyed
   *
   * @method
   * @listens destroyed(el)
   */
  destroyed() {
    console.log('Teleop have been destroyed');
    this.router.$emit('destroyed');

    window.removeEventListener('resize', this.setJoystickStyle);
  },
  methods: {
    /**
     * Callback used to change the state of the joystick
     * @method
     * @param {boolean} state - Request of the joystick state
     * @listens on-joystick-state-changed
     */
    changeJoystickState(state) {
      if (state === 'enable') {
        this.disableJoystick = false;
      } else {
        this.enableJoystick = false;
        this.disableJoystick = true;
      }
    },
    setJoystickStyle() {
      let ratio = 1;
      const e = document.getElementById('joystick-row');
      if (e) {
        ratio = ((e.clientHeight / e.clientWidth) &lt; 1)
          ? `${(((e.clientHeight / e.clientWidth) * 100) - 5)}%` : '95%';
        this.joystickStyle = {
          width: ratio,
          'padding-top': ratio,
          height: 0,

        };
      }
    },
  },
};
&lt;/script>

&lt;style>
&lt;/style>
</code></pre>
        </article>
    </section>




</div>

<br class="clear">

<footer>
    Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Fri Apr 26 2019 14:20:12 GMT-0400 (Eastern Daylight Time) using the Minami theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>
